<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript" src='../vue/dist/vue-router.js'></script>
    <script type="text/javascript">
    // mate在路由里面的使用
        var isLogin = false;
        var Login = {
            template: `<div>
                我的登录页面。。。。。。。。。。。
            </div>`,
            created: function(){
                isLogin = true
            }
        };
        var Music = {
            template: `<div>
                我的音乐页面。。。。。。。。。。。
            </div>`
        };
        var App = {
            template: `<div>
                <router-link :to="{name:'login'}">登录</router-link>
                <router-link :to="{name:'music'}">音乐页面</router-link>
                <router-view></router-view>
            </div>`
        };
        var router = new VueRouter({
            routes: [
                { path: '/',redirect:{ name:'login' } },
                { name: 'login',path: '/login',component: Login },
                { name: 'music',path: '/music',component: Music,meta: {isCheck: true} }
            ]
        });
        router.beforeEach(function(to,form,next){
            console.log(to);
            console.log(form);
            //login放行
            if( !to.music.isCheck ){
                next();//不调用next  就会卡主
            }else{
                //音乐访问
                if(isLogin){
                    next();
                }else{
                    alert('请先登录！');
                    next({ name:'login' });
                }
            }

        });
        new Vue({
            el: '#app',
            router: router,
            components: {
                app: App
            },
            template: "<app/>"
        })
    </script>
</body>
</html>